<!--
 * @Author: lmq
 * @Date: 2019-01-16 09:32:11
 * @LastEditors: lmq
 * @LastEditTime: 2019-02-01 09:32:38
 * @Description: file content
 -->
<template>
  <view>
    <uni-nav-bar
      fixed="true"
      @click-left="back"
      left-text="返回"
      title="添加好友"
      left-icon="jiantou2"
      background-color="#fff"
    ></uni-nav-bar>
    <!-- 非原声导航栏 -->
    <view :style="style"></view>
    <navigator url="../search/search" class="search_phone_tel">
     <uni-icon type="sousuo" color="#0089E1" size="15"></uni-icon>
      <view class="tel_phone">速汇宝账户/手机号</view>
    </navigator>
  
   <!-- 二维码 -->
   <view class="ewm">
     <view class="ewm_bg"></view>
     <view class="border_ewm"></view>
     <view class="add_ewm">
       <view class="myerweima">我的二维码</view>
       <view>扫一扫,加我为好友</view>
     </view>
   </view>
  <mediaList></mediaList>
     <view class="maybeFriends">可能认识的人</view>
    <view class="content">
    
      <view class="redPacket">
        <view
          v-for="(item,index) in getUserFriends"
          :key="index"
          class="item"
          style="margin:10px;border-radius:4px;"
        >
          <view class="amount">
           <image :src="item.author_avatar"></image>
          </view>
          <view class="fundInfo">
            <view class="name pa">鹏华基</view>
          </view>
          <view class="addInfo">
            <view class="pa">添加</view>
          </view>
        </view>
      </view>
    </view>
  
  </view>
</template>

<script>
import { get } from "@/util/request";
import uniNavBar from "@/components/uninavbar";
import uniIcon from "@/components//uni-icon";
import mediaList from "@/components/mediaList";

export default {
  components: {
    uniNavBar,
    uniIcon,
    mediaList
  },
  data() {
    return {
      getUserFriends: []
    };
  },
  onLoad() {
    // this.getInfo();
    this.getUserInfoFriends();
  },
  computed: {
      style() {

    //     uni.getSystemInfo({
    //    success: function (res) {
    //     // console.log(JSON.stringify(res.model));
    //     // console.log(JSON.stringify(res.pixelRatio));
    //     // console.log(JSON.stringify(res.windowWidth));
    //     console.log(JSON.stringify(res.windowHeight));
    //     console.log(JSON.stringify(res.statusBarHeight));
    //     console.log(JSON.stringify(res.windowTop));
    //     // console.log(JSON.stringify(res.platform));
    //     var statusBarHeight = res.statusBarHeight
    // }
// })
      var systemInfo = uni.getSystemInfoSync();
       var systo =  uni.getSystemInfo()
      // console.log( JSON.stringify(systo));
   
          console.log(systemInfo.statusBarHeight);
          var statusBarHeight = systemInfo.statusBarHeight
      // if(systemInfo.platform =="android"){
        return `height:${statusBarHeight+60}px`;
      // }else{
      //  return `height:${statusBarHeight}+44px`;
      // }
  
      
      // return `height:${systemInfo.statusBarHeight}px`;
  }
  },
  onReady() {},
  methods: {
    async getUserInfoFriends() {
      var configURL = "https://unidemo.dcloud.net.cn/api/news";
      let res = await get(configURL,1);
      console.log(res);
      this.getUserFriends = res;
    },
    back(){
       uni.navigateBack({
        delta: 1
      });
    }
    // getInfo() {
    //   uni.request({
    //     url: "https://unidemo.dcloud.net.cn/api/news",
    //     method: "GET",
    //     success: res => {
    //       console.log(res);
    //     }
    //   });
    // }
  }
};
</script>

<style lang="scss" scoped>
.maybeFriends {
  background: #fff;
  font-weight: 700;
  font-size: 22upx;
  padding: 0 5%;
  width: 90%;
}
.content {
  background: #fff;
  width: 100%;
  overflow-x: scroll; /*// 子元素的宽度大于父元素的即可滚动*/
  overflow-y: hidden;
  border-radius: 4px;
}
/*  .content::-webkit-scrollbar {display:none} // 隐藏滚动条*/
.redPacket {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  float: left; /*// 使其脱离文档流 宽度为所有字元素的和*/
  min-width: 100%;
}
.item {
  min-width: 205upx;
  text-align: center;
  /* height: 250px; */
  width: 205upx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .amount {
    background-color: #0ca6ee;
    width: 62upx;
    height: 62upx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .fundInfo {
    margin: 10upx 0 20upx;
  }
  .addInfo {
    width: 80upx;
    height: 40upx;
    background: #0ca6ee;
    text-align: center;
    line-height: 40upx;
    color: #fff;
    .pa {
      font-size: 24upx;
    }
  }
}
.search_phone_tel{
  display: flex;
  background-color: #fff;
  align-items: center;
  height: 75upx;
  padding-left:60upx; 
  margin-top: 52upx;
 .tel_phone{
   color: #949393;
   padding-left: 30upx;
 }
}
.ewm{
  margin: 54upx 0 50upx;
  height: 188upx;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #fff;
  .ewm_bg{
    width: 112upx;
    height: 113upx;
    background-image: url("");
    background-size: cover;
      // background-image: url("@/static/images/friendpagemq/erwema.png")
  }
  .border_ewm{
    content: "";
    height: 136upx;
    width: 1px;
    background: rgb(238, 238, 238);
  }
  .add_ewm{
    :nth-of-type(1){
      font-size: 35upx;
     font-weight: 700;
    }
    
    :nth-child(2){
      font-size:20upx;
      color: rgb(148, 147, 147);
    }
  }
}


</style>